/**
 * Created by JetBrains WebStorm.
 * User: nhuang
 * Date: 12-5-8
 * Time: 下午4:03
 * To change this template use File | Settings | File Templates.
 */
;
(function ($) {
    $.fn.nImageShow = function (options) {
        var defaults = {
//          showBoxId:'showBox',
            imgShowBoxClass:'imgShow',
            imgBtnPrev:'imgPrev',
            imgBtnNext:'imgNext',
            imgFocusClass:'imgFocus',
            imgListBoxClass:'imgList',
            imgListBtnPrev:'listPrev',
            imgListBtnNext:'listNext',
            imgListClass:'imgListCont',
            imgListDivClass:'imgListDiv'
        };
        var opts = $.extend(defaults, options);
        return  this.each(function () {
            var thisShowBox = $(this);
            var imagesData = [
                {
                    "largeImgSrc":"data/largeImg/ijie1.bmp",
                    "smallImgSrc":"data/smallImg/ijie1.bmp",
                    "imgHref":"#"
                },
                {
                    "largeImgSrc":"data/largeImg/ijie2.bmp",
                    "smallImgSrc":"data/smallImg/ijie2.bmp",
                    "imgHref":"#"
                },
                {
                    "largeImgSrc":"data/largeImg/ijie3.bmp",
                    "smallImgSrc":"data/smallImg/ijie3.bmp",
                    "imgHref":"#"
                },
                {
                    "largeImgSrc":"data/largeImg/ijie4.bmp",
                    "smallImgSrc":"data/smallImg/ijie4.bmp",
                    "imgHref":"#"
                },
                {
                    "largeImgSrc":"data/largeImg/ijie5.bmp",
                    "smallImgSrc":"data/smallImg/ijie5.bmp",
                    "imgHref":"#"
                },
                {
                    "largeImgSrc":"data/largeImg/ijie6.bmp",
                    "smallImgSrc":"data/smallImg/ijie6.bmp",
                    "imgHref":"#"
                },
                {
                    "largeImgSrc":"data/largeImg/ijie7.bmp",
                    "smallImgSrc":"data/smallImg/ijie7.bmp",
                    "imgHref":"#"
                },
                {
                    "largeImgSrc":"data/largeImg/ijie8.bmp",
                    "smallImgSrc":"data/smallImg/ijie8.bmp",
                    "imgHref":"#"
                },
                {
                    "largeImgSrc":"data/largeImg/ijie9.bmp",
                    "smallImgSrc":"data/smallImg/ijie9.bmp",
                    "imgHref":"#"
                }
            ];

            function creatImagesList(data) {
                var picListHtml = '<div class="' + opts.imgShowBoxClass + '" ><a class="' + opts.imgBtnPrev + '" ></a><a class="' + opts.imgBtnNext + '" ></a><a href="' + opts.imgHref + '" class="' + opts.imgFocusClass + '"><img id="" src=""></a></div><div class="' + opts.imgListBoxClass + '"><a class="' + opts.imgListBtnPrev + '" ></a><a class="' + opts.imgListBtnNext + '" ></a><div class="' + opts.imgListClass + '" ><div class="' + opts.imgListDivClass + '" >';
                for (var i = 0; i < data.length; i++) {
                    var itemData = data[i];
                    picListHtml += '<a><img id="' + (i + 1) + '" src="' + itemData.smallImgSrc + '" ><span></span><samp>' + (i + 1) + '/' + data.length + '</samp></a>';
                }
                picListHtml += '</div></div></div>';
                thisShowBox.append(picListHtml);

            }

            creatImagesList(imagesData);

            var showItem = 4,
                m = 4,
                count = imagesData.length;
            $("." + opts.imgListBtnNext).live("click", function () {
                var $scrollableDiv = $("." + opts.imgListDivClass);
                if (!$scrollableDiv.is(":animated")) {  //判断元素是否正处于动画，如果不处于动画状态，则追加动画。
                    if (m < count) {  //判断 i 是否小于总的个数
                        m++;
                        $scrollableDiv.animate({ left:"-=114px" }, 600);
                    }
                }

                return false;
            });

            $("." + opts.imgListBtnPrev).live("click", function () {
                var $scrollableDiv = $("." + opts.imgListDivClass);
                if (!$scrollableDiv.is(":animated")) {  //判断元素是否正处于动画，如果不处于动画状态，则追加动画。
                    if (m > showItem) {  //判断 i 是否小于总的个数
                        m--;
                        $scrollableDiv.animate({ left:"+=114px" }, 600);
                    }
                }

                return false;
            });

            $("." + opts.imgListClass + " a").live("click", function () {
                $(this).addClass("active").siblings().removeClass("active");
                var activeImg = $("." + opts.imgListClass + " a").index($(".active"));
                $("." + opts.imgFocusClass + " img").hide().attr("src", imagesData[activeImg].largeImgSrc).fadeIn(500).parent().attr("href", imagesData[activeImg].imgHref);
                if (m - parseInt($(this).find("img").attr("id")) < 2) {
                    $("." + opts.imgListBtnNext).trigger("click");
                } else {
                    $("." + opts.imgListBtnPrev).trigger("click");
                }
                return false;
            });

            $("." + opts.imgBtnPrev).live("click", function () {
                var num = parseInt($("." + opts.imgListDivClass).find(".active img").attr('id'));
                $("." + opts.imgListClass + " a:eq(" + (num-1-1) + ")").trigger("click");

                return false;
            });

            $("." + opts.imgBtnNext).live("click", function () {
                var num = parseInt($("." + opts.imgListDivClass).find(".active img").attr('id'));
                $("." + opts.imgListClass + " a:eq(" + (num-1+1) + ")").trigger("click");

                return false;
            });

            $("." + opts.imgListClass + " a:nth-child(1)").trigger("click");

        })

    }

})(jQuery);
